﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="list.aspx.cs" Inherits="weixin.crm.list" %>

<!DOCTYPE html>
<html lang="en" style="overflow: hidden;">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>打卡记录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="css/jquery-2.1.0.min.js"></script>
    <script src="css/float.js"></script>
    <script type="text/javascript">
        $(function () {
            getdata();
        });
        function getdata() {
            $.ajax({
                url: "api.ashx?rnd=" + Math.random(),
                type: "POST",
                data: { Action: "getsignlist" },
                dataType: "json",
                success: function (data) {
                    if (data.success == true) {
                        var html = $("#tmpl").html();
                        for (var i = 0; i < data.rows.length; i++) {
                            $("#contain").prepend(html.replace("{img}", data.rows[i].path).replace("{addr}", data.rows[i].addr).replace("{date}", data.rows[i].adddate));
                        }
                        if (data.rows.length==0) {
                            $("#contain").prepend('<p style="text-align: center;margin-top: 30%;font-size: 1.5rem;">暂无数据</p>');
                        }
                    }
                    else {
                        alert('打卡失败,' + data.info);
                    }
                },
                error: function () {
                    alert('打卡失败！');
                }
            });
        }
    </script>
    <style>
        .item {
            width: 95%;
            height: 280px;
            background-color: #fff;
            z-index: 9999;
            position: relative;
            margin-bottom:20px;
            border-radius:10px;
            cursor:pointer;
            display: inline-block;
            border:solid 1px #ccc;
            overflow:hidden;
        }
        .item img{
            width: 100%;
            height: 230px;
        }
        .item span{
            width: 100%;
            text-align:center;
            display: block;
            font-weight: bold;
            margin-top:10px;
        }
    </style>
    <script id="tmpl" type="text/html">
        <div class="item"><img alt="" src="{img}" /><span>{addr}({date})</span></div>
    </script>
</head>
<body style="overflow: hidden;">
    <div id="contain" style="overflow:auto;display:inline-block;width:100%;height:95%;padding:10px;"></div>
    <div id="particles-js">
        <div class="sk-rotating-plane"></div>
        <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1920" height="917"></canvas>
    </div>
</body>
</html>